<!-- CustomEdgeButton.vue -->
<script setup>
import { defineEmits, defineProps } from 'vue'

const props = defineProps({
    text: String,
    icon: String
})

const emit = defineEmits(['toolEvent'])

const handleClick = () => {
    emit('toolEvent', 'customClick', { message: '按钮被点击!' })
}
</script>

<template>
    <div class="custom-edge-button" @click="handleClick">
        <span v-if="icon" class="icon">{{ icon }}</span>
        <span>{{ text || "操作" }}</span>
    </div>
</template>

<style scoped>
.custom-edge-button {
    padding: 4px 8px;
    background: #1890ff;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
}

.custom-edge-button:hover {
    background: #40a9ff;
    transform: translateY(-1px);
}

.icon {
    font-size: 14px;
}
</style>